<template>
  <section>
    <van-sticky>
      <PageHeader title="资源管理"/>
    </van-sticky>

    <div class="pd10">
      <van-button type="primary" class="w100" @click="$router.push({name: 'ResourceAdd'})">+添加</van-button>
    </div>

    <div class="flex flex-col pd10 bg-color-white font-common">
      <div class="flex flex-row flex-left flex-centerV mb10" v-for="(item, index) in resources" :key="index">
        <span class="mr10" v-bind:style="{paddingLeft:item.layer*10 + 'px'}">{{item.name}}</span><van-icon name="delete" size="20px" @click="onItemDeleteTap(index)" />
      </div>
    </div>
  </section>
</template>

<script>
import Vue from 'vue';
import {Dialog} from 'vant';
import PageHeader from "../componets/PageHeader";
import {resourceDeleteUri, resourceOptionsUri} from "../../common/api";
Vue.use(Dialog);

export default {
  components: {
    PageHeader
  },
  data() {
    return {
      resources: []
    }
  },
  methods: {
    onItemDeleteTap(index) {
      const that = this;
      Dialog.confirm({
        message: '确定要删除吗？',
      }).then(() => {
        const url = resourceDeleteUri + '?id=' + this.resources[index].id;
        that.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            that.$toast.fail(msg);
          } else {
            that.getResources();
          }
        }, response => {
          // error callback
        })
      }).catch(() => {
        // on cancel
      });
    },
    getResources() {
      const that = this;
      this.$http.get(resourceOptionsUri).then(response => {
        let {code, msg, data} = response.body
        if (code != 0) {
          that.$toast.fail(msg);
        } else {
          that.resources = data;
        }
      }, response => {
        // error callback
      })
    }
  },
  mounted: function () {
    this.getResources();
  }
}
</script>

<style scoped>

</style>
